<template>
	<view class="uni_box market">
		<u-navbar :is-back="false" title="">
			<view class="slot_content">
				<view class="nav_title">流转中心</view>
			</view>
		</u-navbar>
		<u-sticky>
			<u-dropdown ref="uDropdown">
				<u-dropdown-item :title="typeTitle">
					<view class="dropdown_content">
						<view class="item" :class="{ active: type == item.value }" @click="typeChange(item)"
							v-for="(item, index) in typeList">
							{{item.label}}
						</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item :title="price_title">
					<view class="dropdown_content">
						<view class="item" :class="{ active: price_sort == item.value }" @click="priceChange(item)"
							v-for="(item, index) in priceList">
							{{item.label}}
						</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item :title="new_title">
					<view class="dropdown_content">
						<view class="item" :class="{ active: new_sort == item.value }" @click="sortChange(item)"
							v-for="(item, index) in sortList">
							{{item.label}}
						</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item :title="class_title">
					<view class="dropdown_content">
						<view class="item" :class="{ active: class_id == item.value }" @click="classChange(item)"
							v-for="(item, index) in class_list">
							{{item.label}}
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
			<view class="sticky_item">
				<view class="search_box">
					<image src="@/static/10.svg"></image>
					<input type="text" placeholder="请输入想要搜索的内容">
					<view class="search_btn">搜索</view>
				</view>
			</view>
		</u-sticky>
		<view class="list">
			<view class="item" v-for="item in list" @click="router(item.product_id)">
				<image :src="item.product_cover"></image>
				<view class="name">
					<text>{{item.product_name}}</text>
					<text v-if="item.product_number">#{{item.product_number}}</text>
				</view>
				<!-- <view class="nickname">Rights制造</view> -->
				<view class="price">¥ {{item.price}}</view>
			</view>
		</view>

		<u-loadmore :status="status" :loadText="$store.state.loadText" @loadmore="loadmore" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				typeList: [{
					label: '藏品',
					value: 1,
				}, {
					label: '盲盒',
					value: 2,
				}],
				typeTitle: '藏品',

				priceList: [{
					label: '价格升序',
					value: "asc",
				}, {
					label: '价格降序',
					value: "desc",
				}],
				price_title: "价格升序",
				price_sort: "asc",

				sortList: [{
					label: '时间升序',
					value: "asc",
				}, {
					label: '时间降序',
					value: "desc",
				}],
				new_title: "时间升序",
				new_sort: "asc",

				class_list: [],
				class_title: '',
				class_id: '',

				list: [],
				page: 1,
				last_page: 1,
				limit: 10,
				status: 'loadmore',
			}
		},
		async onLoad() {
			let res = await this.$u.api.orderSellList();
			let series = res.class;
			let class_list = [{
				label: "全部",
				value: ""
			}];
			let keys = Object.keys(series);
			Object.keys(series).forEach(item => {
				class_list.push({
					label: series[item],
					value: item,
				});
			})
			this.class_title = class_list[0].label;
			this.class_id = class_list[0].value;
			this.class_list = class_list;

			this.getList();
		},
		onReachBottom: function() {
			this.loadmore();
		},
		methods: {
			async getList() {
				let {
					list
				} = await this.$u.api.orderSellList({
					product_type: this.type,
					price_sort: this.price_sort,
					new_sort: this.new_sort,
					series_id: this.series_id,
					class_id: this.class_id,
					page: this.page,
					limit: this.limit
				});
				this.last_page = list.last_page;
				this.list = this.page == 1 ? list.list : [...this.list, ...list.list];
				if (this.last_page == this.page) {
					this.status = 'nomore';
				}
			},
			loadmore() {
				let page = this.page;
				let last_page = this.last_page;
				if (page < last_page) {
					this.page++;
					this.getList();
				}
			},
			initGet() {
				this.$refs.uDropdown.close();
				this.list = [];
				this.page = 1;
				this.status = "loadmore";
				this.getList();
			},
			typeChange(item) {
				this.type = item.value;
				this.typeTitle = item.label;
				this.initGet();
			},
			priceChange(item) {
				this.price_sort = item.value;
				this.price_title = item.label;
				this.initGet();
			},
			sortChange(item) {
				this.new_sort = item.value;
				this.new_title = item.label;
				this.initGet();
			},
			classChange(item) {
				this.class_id = item.value;
				this.class_title = item.label;
				this.initGet();
			},
			router(id) {
				let url = `/pages/market/marketList?id=${id}`;
				// let url = this.type == 1 ? `/pages/market/collectionDeta?id=${id}` : `/pages/market/blindBoxDeta?id=${id}`;
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.market {
		padding-bottom: $tabBarHeight;

		.nav_title {
			color: #509E66;
			font-size: 32rpx;
			font-weight: 800;
		}

		/deep/ .u-sticky {
			background-color: #fff;
		}

		.dropdown_content {
			background-color: #FFFFFF;
			padding: 24rpx;
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 200rpx;
				text-align: center;
				margin: 16rpx;
				border: 1px solid #00CACE;
				padding: 8rpx;
				border-radius: 100rpx;
			}

			.active {
				color: #00CACE;
				background-color: #000000;
			}
		}

		.sticky_item {
			padding: 44rpx 30rpx;
			box-sizing: border-box;

			.search_box {
				width: 100%;
				height: 100rpx;
				background: #F0FBF3;
				border-radius: 20rpx;
				border: 1px solid #6BD288;
				padding: 0 24rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				input {
					flex: 1;
					width: 0;
					margin: 0 20rpx;
				}

				.search_btn {
					width: 88rpx;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 24rpx;
					border-radius: 10rpx;
					background: #6BD288;
				}
			}
		}

		.list {
			padding: 0 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				width: 330rpx;
				border-radius: 20rpx;
				margin-bottom: 44rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background: #F0FBF3;

				image {
					width: 100%;
					height: 290rpx;
					border-radius: 20rpx;
				}

				.name {
					height: 40rpx;
					line-height: 40rpx;
					color: #0D0D0D;
					font-size: 24rpx;
					font-weight: 700;
					margin: 20rpx 0;
				}

				.nickname {
					color: #C2C2C2;
					font-size: 20rpx;
					font-weight: 400;
					margin-bottom: 20rpx;
				}

				.price {
					height: 40rpx;
					line-height: 40rpx;
					color: #ED905B;
					font-size: 24rpx;
					font-weight: 400;
					margin: 20rpx 0;
				}
			}
		}

	}
</style>
